<template>
    <!-- 左侧列表 -->
    <div style="width: 100px; border-right: 1px solid #ccc; padding: 10px;">
        <ul>
            <li v-for="num in numbers" :key="num">
                <button @click="openTab(num)">Item {{ num }}</button>
            </li>
            <li>
                <button @click="toOther">其他</button>
            </li>
        </ul>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import useRdatStore from "../stores/index"


const currentId = ref(1); // 当前激活的页面 ID
const tabs = ref([]); // 动态存储的页面实例
const itemInputRefs = ref([]);
const router = useRouter();
const useRdat = useRdatStore();
const numbers = [1, 2, 3, 4, 5]; // 左侧列表

const openTab = (id) => {
    console.log("id:", id)
    console.log("currentId:", useRdat.currentId);
    console.log("刚刚离开的ID：", useRdat.currentId);

    if (!tabs.value.includes(id)) {
        // 如果页面未创建，则添加到 tabs 对象中
        tabs.value.push(id);
    }
    console.log("tabs:", tabs.value)
    // 检查点击之前的页面里面的text的值，如果为空就删除，否则不删除
    console.log("itemInputRefs.value的大小：", itemInputRefs.value.length);


    for(var i=0; i<itemInputRefs.value.length;i++) {
        console.log("itemInputRefs.value[i].getText():", itemInputRefs.value[i].getText());
        if(itemInputRefs.value[i].getId() === useRdat.currentId && itemInputRefs.value[i].getText() === "") {
            let deleteID = itemInputRefs.value[i].getId();
            console.log("deleteID:", deleteID)
            let index = tabs.value.indexOf(deleteID);
            if (index > -1) {
                tabs.value.splice(index, 1); // 第二个参数表示删除的项数
                console.log("页面移除成功")
                break;
            }
        }
    }

    // 切换到当前页面
    currentId.value = id;
    console.log("currentId:", useRdat.currentId)
    console.log("tabs.entries:", tabs.value)
};

const toOther = () => {
    for(var i=0; i<itemInputRefs.value.length;i++) {
        console.log("itemInputRefs.value[i].getText():", itemInputRefs.value[i].getText());
        if(itemInputRefs.value[i].getId() === useRdat.currentId && itemInputRefs.value[i].getText() === "") {
            let deleteID = itemInputRefs.value[i].getId();
            console.log("deleteID:", deleteID)
            let index = tabs.value.indexOf(deleteID);
            if (index > -1) {
                tabs.value.splice(index, 1); // 第二个参数表示删除的项数
                console.log("页面移除成功")
                break;
            }
        }
    }
    resetCurrentId();
    router.push("/other")
}

const resetCurrentId = () => {
    useRdat.currentId = null; 
}
</script>
